<!DOCTYPE html>
<html lang="zh">

	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<script src="../../js/lib/jquery-v3.0.0/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script src="../jquery.plugins/jquery.dhclly.droplist.js" type="text/javascript" charset="utf-8"></script>
		<title>实现一个能展示项更多的项的插件</title>
		<style type="text/css">
			@import url("index.css");
		</style>
	</head>

	<body>
		<p>实现一个能展示项更多的项的插件</p>
		<p>如:输入abc</p>
		<p>显示</p>
		<p>abc</p>
		<p>ab</p>
		<p>a</p>
		<hr />
		<div class="container-search">
			<input type="text" class="search-box" class="" id="search" />
			<span class="arrow" id="more"></span>
			<button class="btn-search" onclick="alert('the button is useless')">确定</button>
		</div>
		<div id="test"></div>
		<script type="text/javascript">
			var moreList = [];
			var $search = $('#search');
			var show = false;
			$search.on('change', function() {
				let val = this.value;
				moreList = getFormatValue(val);
				$("#test").text(moreList);
			})
			
			function getFormatValue(str) {
				var arr = [];
				for(var i = 0, len = str.length; i < len; i++) {
					tmp = str.substr(0, len - i);
					arr.push(tmp);
				}
				return arr;
			}
			
			$search.droplist();
			
			$('#more').click(function () {
				show = !show;
				$search.droplist("show",show);
			});
			
			
		</script>
	</body>

</html>